<template>
  <el-upload
      class="upload"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
      :before-upload="fileBeforeUpload"
      :on-success="fileSuccess"
      :on-remove="fileRemove"
  >
    <el-icon size="80px"  color="#92ded5" ><upload-filled  /></el-icon>
    <div class="el-upload__text">
      拖拽或者 <em>点击上传</em>
    </div>
    <div class="upload__title">{{uploadFile.fileDesc}}</div>
    <div class="upload__tip" slot="tip">
      {{uploadFile.uploadLimitDesc}}
    </div>
  </el-upload>
</template>
<script lang="ts" setup>
import { UploadFilled } from '@element-plus/icons-vue'
import {UploadFileType} from "../../type";
import {PropType} from "vue";
import {useVModel} from "@vueuse/core";
import {ElMessage, UploadProps} from "element-plus";
const props = defineProps({
  uploadFile:{
    type:Object as PropType<UploadFileType>,
    default:()=>({}),
    required:true
  }
})
const emit = defineEmits(['update:uploadFile'])
const currentUploadFileMap = useVModel(props, 'uploadFile', emit)
/**
 * @description 文件上传之前的钩子函数
 * @author 莫若省
 * @createTime 2024/6/24
*/
const fileBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  //获取当前文件后缀名称
  const fileType = rawFile.name ? rawFile.name.split('.').pop() : ''
  if(!fileType){
    ElMessage({
      type: 'error',
      message: '非法文件请重新上传!'
    })
    return false
  }
  //如果存在则去重
  const  fileAlreadyExist = currentUploadFileMap.value.uploadedFileId.filter(item => item === rawFile.name)
  if(fileAlreadyExist.length){
    ElMessage({
      type: 'error',
      message: '文件已存在,请勿再次上传!'
    })
    return false
  }
  //判断文件类型是否符合要求
  //禁止上传的类型
  const fileBanType = props.uploadFile.fileBanType
  //允许上传的文件类型
  const fileLimitType = props.uploadFile.fileLimit
  if(fileBanType.includes(fileType.toLowerCase()) && !fileLimitType.includes(fileType.toLocaleLowerCase())){
    ElMessage({
      type: 'error',
      message: `文件格式错误请重新上传!`
    })
    return false
  }
  //判断文件大小是否超出限制
  const uploadLimit = props.uploadFile.fileLimitSize * 1024 * 1024
  if(rawFile.size > uploadLimit){
    ElMessage({
      type: 'error',
      message: `文件大小不能超过${uploadLimit / 1024 / 1024}MB!`
    })
    return false
  }
}
/**
 * @description 文件成功上传的钩子函数
 * @author 莫若省
 * @createTime 2024/6/24
*/
const fileSuccess: UploadProps['onSuccess'] = (response) => {
  if(response.code === 200){
    //TODO 伪代码需要替换为服务器需要采集的数据
    currentUploadFileMap.value.uploadedFileId.push(response.data)
  }
}
/**
 * @description 上传成功后文件被删除的钩子函数
 * @author 莫若省
 * @createTime 2024/6/24
*/
const fileRemove: UploadProps['onRemove'] = (file) => {
  //TODO 伪代码需要替换为删除文件操作
  currentUploadFileMap.value.uploadedFileId = currentUploadFileMap.value.uploadedFileId.filter(item => item !== file.raw!.name)
}
</script>
<style lang="scss" scoped>
.upload {
  position: relative;
  top: 0;
  left: 0;
  width: 340px;
}
.upload__title {
  position: absolute;
  top: 5%;
  left: 5%;
  color: var(--el-text-color-secondary);
}
.el-upload__text {
  color: var(--el-text-color-secondary);
}
.upload__tip {
  margin-top: 10px;
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-secondary);
}
</style>
